<template>
    <section class="conversation-list">
        <virtual-list v-if="true" :data-component="conversationItemView" :data-sources="conversationInfoList" :data-key="conversationInfoKey"
                      :estimate-size="30"
                      style="height: 100%; overflow-y: auto;"/>

        <div v-else style="height: 100%; overflow-y: auto;">
            <ConversationItemView v-for="conversationInfo in conversationInfoList" :source="conversationInfo" :key="conversationInfoKey(conversationInfo)"/>
        </div>
        <vue-context ref="menu" v-slot="{data:conversationInfo}" v-on:close="onConversationItemContextMenuClose">
            <li>
                <a @click.prevent="setConversationTop(conversationInfo)">{{
                        conversationInfo && conversationInfo.top ? $t('conversation.cancel_sticky_top') : $t('conversation.sticky_top')
                    }}</a>
            </li>
            <li>
                <a @click.prevent="setConversationSilent(conversationInfo)">{{
                        conversationInfo && conversationInfo.isSilent ? $t('conversation.enable_notification') : $t('conversation.disable_notification')
                    }}</a>
            </li>
            <li>
                <a @click.prevent="removeConversation(conversationInfo)">{{ $t('common.delete') }}</a>
            </li>
            <li v-show="conversationInfo
                && conversationInfo._unread === 0"
                @click.prevent="markConversationAsUnread(conversationInfo.conversation)">
                <a>{{ $t('conversation.mark_as_unread') }}</a>
            </li>
            <li v-show="conversationInfo
                && conversationInfo._unread > 0"
                @click.prevent="clearConversationUnreadStatus(conversationInfo)">
                <a>{{ $t('conversation.mark_as_read') }}</a>
            </li>
        </vue-context>
    </section>
</template>

<script>

import ConversationItemView from "./ConversationItemView.vue";
import store from "../../../store";
import wfc from "../../../wfc/client/wfc";
import {markRaw} from "vue";

export default {
    name: 'ConversationListView',
    data() {
        return {
            sharedConversationState: store.state.conversation,
            sharedMiscState: store.state.misc,
            conversationItemView: markRaw(ConversationItemView),
        };
    },

    created() {
        // 监听鼠标右键
        this.$eventBus.$on('showConversationContextMenu', ([event, conversationInfo]) => {
            this.showConversationItemContextMenu(event, conversationInfo);
        });
    },

    unmounted() {
        this.$eventBus.$off('showConversationContextMenu');
    },

    methods: {
        // 置顶
        setConversationTop(conversationInfo) {
            store.setConversationTop(conversationInfo.conversation, conversationInfo.top > 0 ? 0 : 1);
        },
        // 消息免打扰
        setConversationSilent(conversationInfo) {
            store.setConversationSilent(conversationInfo.conversation, !conversationInfo.isSilent);
        },
        // 删除
        removeConversation(conversationInfo) {
            store.removeConversation(conversationInfo.conversation);
        },
        // 返回key值
        conversationInfoKey(conversationInfo) {
            let conv = conversationInfo;
            return conv.target + '-' + conv.type + '-' + conv.line;
        },
        // 居中滚动
        scrollActiveElementCenter() {
            let el = this.$el.getElementsByClassName("active")[0];
            el && el.scrollIntoView({behavior: "instant", block: "center"});
        },
        // 展示右键菜单ConversationItemView
        showConversationItemContextMenu(event, conversationInfo) {
            if (!this.$refs.menu) {
                return;
            }
            this.sharedConversationState.contextMenuConversationInfo = conversationInfo;
            this.$refs.menu.open(event, conversationInfo)
        },
        // 关闭菜单
        onConversationItemContextMenuClose() {
            this.sharedConversationState.contextMenuConversationInfo = null;
        },
        // 标记已读
        clearConversationUnreadStatus(conversation) {
        },
        // 标记未读
        markConversationAsUnread(conversation) {
            wfc.markConversationAsUnread(conversation, true);
        },
    },
    activated() {
        this.scrollActiveElementCenter();
    },
    computed: {
        conversationInfoList() {
            return this.sharedConversationState.conversationInfoList
        }
    },

    components: {ConversationItemView},
};
</script>

<style lang="css" scoped>

.conversation-list {
    height: 100%;
    overflow: auto;
}

</style>
